<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/ticket.css">
    <title>QQ音乐_票务</title>
</head>

<body>
    <!-- 头部 -->
    <header class="header-wrapper w100">
        <div class="header-box w1600">
            <div class="header-nav">
                <div class="logo">
                    <a href="#" class="logo-a">
                        <img src="images/logo.png" class="logo-img">
                    </a>
                </div>
                <nav class="mainnav">
                    <ul class="mainnav-ul">
                        <li class="mainnav-li active">
                            <a href="#" class="mainnav-a">音乐馆</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">我的音乐</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">客户端</a>
                            <img src="images/mark_1.png" alt="" class="mark-img">
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">开放平台</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">VIP</a>
                        </li>
                    </ul>
                </nav>
                <!-- 搜索 -->
                <div class="search">
                    <form action="">
                        <button class="btn-search"></button>
                        <input type="text" name="keywords" id="keywords" placeholder="搜索音乐、MV、歌单、用户"
                            class="search-input" autocomplete="off">
                        <div class="search-wrapper">
                            <div class="search-drop">
                                <ul class="search-drop-ul">
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">1</span>
                                            <p class="search-title">我们的歌我们的歌我们的歌</p>
                                            <span class="count">765.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">2</span>
                                            <p class="search-title">梦华录主题曲</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">3</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">4</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">5</span>
                                            <p class="search-title">星辰大海</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 用户 -->
                <div class="user">
                    <a href="#" class="btn-login">登录</a>
                    <div class="btn btn-vip user-btn">
                        <span class="btn-content">开通VIP</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">开通绿钻豪华版</a>
                            <a href="#" class="drop-menu-a">开通付费包</a>
                        </div>
                    </div>
                    <div class="btn btn-money user-btn">
                        <span class="btn-content">充值</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">购买乐比</a>
                            <a href="#" class="drop-menu-a">充值饭票</a>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="subnav">
                <ul class="subnav-ul">
                    <li class="subnav-li">
                        <a href="index.html" class="subnav-a">首页</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">歌手</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">新碟</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="top.html" class="subnav-a">排行榜</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">分类歌单</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">MV</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">电台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">数字专辑</a>
                    </li>
                    <li class="subnav-li active">
                        <a href="ticket.html" class="subnav-a">票务</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 模块 -->
    <main class="main w100">
        <section class="section w100">
            <div class="section-wrapper w1600 pr">
                <div class="ticket-banner">
                    <ul class="ticket-banner-ul">
                        <li class="ticket-banner-li">
                            <a href="#" class="ticket-banner-a">
                                <img src="images/upload/ticket/1.webp" class="ticket-banner-img">
                            </a>
                        </li>
                        <li class="ticket-banner-li">
                            <a href="#" class="ticket-banner-a">
                                <img src="images/upload/ticket/2.webp" class="ticket-banner-img">
                            </a>
                        </li>
                        <li class="ticket-banner-li">
                            <a href="#" class="ticket-banner-a">
                                <img src="images/upload/ticket/3.webp" class="ticket-banner-img">
                            </a>
                        </li>
                    </ul>
                    <div class="section-pagebar">
                        <ul class="section-pagebar-ul">
                            <li class="section-pagebar-li active"></li>
                            <li class="section-pagebar-li"></li>
                            <li class="section-pagebar-li"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="btn-page btn-prev">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="btn-page btn-next">
                <i class="iconfont icon-gengduo"></i>
            </div>
        </section>

        <section class="section w100 sectionbgwhite ticket-choice">
            <div class="section-wrapper w1600 pr">
                <div class="ticket-search">
                    <div class="ticket-city">
                        <span class="ticket-city-checked vm">成都</span>
                        <i class="arrow-down vm"></i>
                        <div class="city-wrapper">
                            <div class="city-currentwrapper">
                                <div class="city-current mb20">
                                    <span>当前城市</span>
                                    <p><a href="#" class="city-checked">成都</a></p>
                                </div>
                                <div class="city-hot">
                                    <span>热门城市</span>
                                    <p>
                                        <a href="#" class="city-name">成都</a>
                                        <a href="#" class="city-name">上海</a>
                                        <a href="#" class="city-name">深圳</a>
                                        <a href="#" class="city-name">广州</a>
                                        <a href="#" class="city-name">杭州</a>
                                        <a href="#" class="city-name">南京</a>
                                        <a href="#" class="city-name">重庆</a>
                                    </p>
                                </div>
                            </div>
                            <p>按字母查找</p>
                            <ul class="city-letters">
                                <li class="active"><a href="#" class="city-letter">A</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                            </ul>
                            <div class="city-listbox">
                                <ul class="city-lists">
                                    <li class="city-list">
                                        <span>A</span>
                                        <p>
                                            <a href="#" class="city-name">澳门</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>B</span>
                                        <p>
                                            <a href="#" class="city-name">北京</a>
                                            <a href="#" class="city-name">包头</a>
                                            <a href="#" class="city-name">宝鸡</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>C</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>D</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>E</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>E</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>E</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>E</span>
                                        <p>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">重庆</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="ticket-keywords">
                        <input type="text" name="keywords" id="keywords" placeholder="搜索票务" autocomplete="off"
                            class="ticket-input">
                        <button class="btn-ticket-search"><i class="iconfont icon-search"></i></button>
                    </div>
                    <div class="more ticket-order">
                        <a class="more-a" href="#"><span>我的订单</span><i class="iconfont icon-gengduo"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <section class="section w100 sectionbgwhite">
            <div class="section-wrapper w1600 pr">
                <ul class="ticket-menu">
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon0"></i>
                            <h3 class="ticket-menu-h3">全部</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon1"></i>
                            <h3 class="ticket-menu-h3">演唱会</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon3"></i>
                            <h3 class="ticket-menu-h3">LiveHouse</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon4"></i>
                            <h3 class="ticket-menu-h3">音乐会</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon5"></i>
                            <h3 class="ticket-menu-h3">舞蹈芭蕾</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon6"></i>
                            <h3 class="ticket-menu-h3">话剧歌剧</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon7"></i>
                            <h3 class="ticket-menu-h3">其它演出</h3>
                        </a>
                    </li>
                </ul>
            </div>
        </section>

        <section class="section w100">
            <div class="section-wrapper w1600 pr">
                <h2 class="ticket-h2">LiveHouse</h2>
                <div class="ticket-container">
                    <div class="ticket-maincover-box">
                        <a href="#" class="ticket-maincover-a">
                            <img src="images/upload/ticket/LiveHouse/1.webp" class="ticket-maincover">
                            <div class="ticket-maincover-title">
                                <h3 class="ticket-maincover-h3">V89乐队2022巡演 上海站</h3>
                                <span class="ticket-price">¥ 100 起</span>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/LiveHouse/2.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">败犬乐队【寅虎春巡】2022巡演 上海站2022巡演 上海站2022巡演 上海站</h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/LiveHouse/3.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/LiveHouse/4.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/LiveHouse/5.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>

            </div>

        </section>
        <section class="section w100">
            <div class="section-wrapper w1600 pr">
                <h2 class="ticket-h2">音乐会</h2>
                <div class="ticket-container">
                    <div class="ticket-maincover-box">
                        <a href="#" class="ticket-maincover-a">
                            <img src="images/upload/ticket/music/1.webp" class="ticket-maincover">
                            <div class="ticket-maincover-title">
                                <h3 class="ticket-maincover-h3">V89乐队2022巡演 上海站</h3>
                                <span class="ticket-price">¥ 100 起</span>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/music/1.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">败犬乐队【寅虎春巡】2022巡演 上海站2022巡演 上海站2022巡演 上海站</h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                    <span class="ticket-price-sale">
                                        <i class="ticket-price-icon"></i>
                                        <span class="ticket-price-icontext">立减</span>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/music/2.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                    <span class="ticket-price-sale">
                                        <i class="ticket-price-icon"></i>
                                        <span class="ticket-price-icontext">立减</span>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/music/3.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                    <span class="ticket-price-sale">
                                        <i class="ticket-price-icon"></i>
                                        <span class="ticket-price-icontext">立减</span>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-container-box">
                        <a href="" class="ticket-item-a">
                            <div class="ticket-item-imgbox">
                                <img src="images/upload/ticket/music/4.webp" class="ticket-itemcover">
                            </div>
                            <div class="ticket-item-info">
                                <h3 class="ticket-item-h3">春日玫瑰乐队「会是爱吗」2022首轮巡演 上海站 </h3>
                                <span class="ticket-time">2022.07.29</span>
                                <span class="ticket-address">上海-育音堂（凯旋店）</span>
                                <div class="ticket-price">
                                    ¥ 100 <span class="ticket-price-span">起</span>
                                    <span class="ticket-price-sale">
                                        <i class="ticket-price-icon"></i>
                                        <span class="ticket-price-icontext">立减</span>
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>

            </div>

        </section>
    </main>


    <!-- 尾部 -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
            <div class="footer-top">
                <div class="footer-item">
                    <h5 class="footer-title">下载QQ音乐客户端</h5>
                    <ul class="footer-item-ul">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon0"></div>
                                <span>PC版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon1"></div>
                                <span>Mac版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon2"></div>
                                <span>Android版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon3"></div>
                                <span>iPhone版</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">特色产品</h5>
                    <ul class="footer-item-wrap">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon4"></div>
                                <span>全民K歌</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon5"></div>
                                <span>银河音效</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon6"></div>
                                <span>QPlay</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon7"></div>
                                <span>Fan直播伴侣</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>车载互联</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>QQ演出</span>
                            </a>
                        </li>


                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">合作链接</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">开放平台</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">QQ音乐开放平台</a>
                        <a href="#" class="footer-link">腾讯音乐人</a>
                        <a href="#" class="footer-link">音乐推</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">TME集团官网</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">腾讯音乐</a>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="footer-copyright-links">
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                </div>
                <p class="footer-copyright-text">Copyright © 1998 - 2022 Tencent. <a href="#">All Rights Reserved.</a>
                </p>
                <div class="footer-copyright-links">
                    腾讯公司
                    <a href="#" class="footer-copyright-a">版权所有</a>
                    <a href="#" class="footer-copyright-a">营业执照</a>
                    <span class="footer-copyright-a">网络文化经营许可证：<a href="#">粤网文[2020]3396-195号</a></span>
                    <span class="footer-copyright-a">客服电话：<a href="#">4006016666</a></span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 侧边 -->
    <aside class="aside">

        <a href="#" class="aside-box-a">
            <span class="aside-icon back"></span>
        </a>
        <a href="#" class="aside-box-a">
            反馈
        </a>
        <a href="#" class="aside-box-a">
            <span class="aside-icon music"></span>
        </a>

    </aside>
    <div class="app-download">
        <img src="images/logo.png" class="download-logo">
        <p>千万高品质曲库尽享</p>
        <a href="#" class="download-a">
            <i class="download-icon"></i>
            <span>客户端下载</span>
        </a>


    </div>
</body>

</html>